<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#wrapper {
			margin: 50px auto;
			position: relative;
			border: 10px solid black;
			height: 500px;
			width: 1000px;
		}

		.item {
			width: 200px;
			height: 100px;
			cursor: default;
			background-color: white;
			border: 1px solid black;
			position: absolute;
			user-select: none;
			border-radius: 4px;
			border: 1px solid #222;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
		}

		.item header {
			background-color: #ccc;
			color: black;
			padding: 5px 10px;
		}

		.item main {
			padding: 5px 10px;
		}

		.item.dragging {
			opacity: 0.8;

		}
	</style>
</head>

<body ontouchmove="return false;">

	<div id="wrapper">

		<div id="demo1" class="item">
			<header>demo1</header>
			<main>drag1</main>
		</div>

		<div id="demo2" class="item" style="left: 300px">
			<header>demo2</header>
			<main>drag2</main>
		</div>

	</div>

	<script type="module">

		import { Drag1, Drag2 } from '../dist/index.js';

		let d1 = Drag1(document.getElementById('demo1'), {
			// handle: 'header',
			onDragMove: (evt, data) => { }
		});


		let d2 = Drag2('#demo2', {
			// handle: 'header',
			onDragMove: (evt, data) => {
				// console.log(data);
			}
		});

	</script>

</body>

</html>